<template>
    <div class="full-h flex-center" style="position: relative;">
        <xpFlipClock :scale="1.35"></xpFlipClock>
        <div class="audio-icon" title="音效" style="display:inline-block">
            <img :src="volumeSrc" @click="handleAudio"/>
            <audio style="display:none" ref="clockAudio" :loop="true">
                <source :src="require('@/assets/audio/clock.mp3')">
                您的浏览器太low了,不支持播放
            </audio>
        </div>
    </div>
  </template>
  
<script lang='ts'>
import { reactive, ref, toRefs } from 'vue';
import xpFlipClock from '@/components/xpFlipClock/xpFlipClock.vue';
export default {
    name:'xpTimes',
    props: {

    },
    components: {
        xpFlipClock
    },
    emits:[],
    setup (props, context) 
    {
        const clockAudio:any = ref(null);
        let data = reactive({
            volumeSrc:require('@/assets/app/volume-off.svg')
        });
        let methods = {
            handleAudio ()
            {
                if (clockAudio.value.paused)
                {
                    data.volumeSrc = require('@/assets/app/volume-on.svg');
                    clockAudio.value.play();
                }
                else
                {
                    data.volumeSrc = require('@/assets/app/volume-off.svg');
                    clockAudio.value.pause();
                }
            }
        };
        return { 
            ...toRefs(data),
            clockAudio,
            ...methods
        };
    }
};
</script>
  
<style scoped lang="scss">
.audio-icon {
    position: absolute;
    bottom: 10px;
    right: 15px;
    transition: all .3s;
    cursor: pointer;
    width: 25px;
    height: 25px;
}
</style>
  